<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div id="box">一个块1</div>
<input type="text" name="user">
<input type="text" name="user">
<div class="box">一个块2</div>
<div class="box">一个块3</div>

<script>
// 获取元素节点（相当于css的选择器）

// document.getElementById(元素id名)返回一个元素节点
// var box = document.getElementById('box');
// console.log( box );// <div id="box">一个块</div>
// console.dir( box );// div#box 可以看到对象属性
// console.log( typeof box );// 'object'

// document.getElementsByName(name属性值)返回节点列表（类数组对象/伪数组）
// var users = document.getElementsByName('user');
// console.log( users );// NodeList(2) [input, input]
// console.log( users[0] );// <input type="text" name="user">
// console.log( users[1] );// <input type="text" name="user">
// console.log( typeof users );// 'object'

// document.getElementsByTagName(标签名)返回html集合（类数组对象/伪数组）
// var divs = document.getElementsByTagName('div');
// console.log( divs );// HTMLCollection(2) [div#box, div.box, box: div#box]
// console.log( divs[0] );// <div id="box">一个块1</div>
// console.log( divs[1] );// <div class="box">一个块2</div>
// console.log( typeof divs );// 'object'

// document.getElementsByClassName(类名)返回html集合（类数组对象/伪数组）
// var boxs = document.getElementsByClassName('box');
// console.log( boxs );// HTMLCollection(2) [div.box, div.box]
// console.log( boxs[0] );// <div class="box">一个块2</div>
// console.log( boxs[1] );// <div class="box">一个块3</div>
// console.log( typeof boxs );// 'object'

// NodeList节点列表 或 HTMLCollectionhtml集合 我们都统称为 元素集合

</script>
</body>
</html>